import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text, Image, Form } from '@tarojs/components'
import './index.less'
import { HTTP } from './../../../common/index';
import { API } from './../../../common/API';
import no_selected from '../../images/seleed_not.png';
import selected from '../../images/seleed.png';
import NoData from '../../components/no-data'
import { AtMessage } from 'taro-ui';
export default class Index extends Component<any, any> {
    constructor() {
        super(...arguments)
        this.state = {
            userInfo: null,
            list: [],
            startX: 0, //开始坐标
            startY: 0,
            selectId: -1,
        }
    }
    componentWillMount() {
        this.setState({
            userInfo: Taro.getStorageSync('userInfo')
        })
    }

    componentDidMount() {
        console.log('componentDidMount')
    }

    componentWillUnmount() {
        console.log('componentWillUnmount')
    }
    getAddressList() {
        let data = {
            userId: this.state.userInfo.sell_id
        }
        HTTP(API.GETADDRESS, data, 'GET').then((res: any) => {
            this.setState({
                list: res.data
            })
        })
    }
    componentDidShow() {
        console.log('componentDidShow')
        this.getAddressList()
    }

    componentDidHide() {
        console.log('componentDidHide')
    }
    touchE(e: any) {
        console.log(e);
        var that = this
        if (e.changedTouches.length == 1) {
            //手指移动结束后触摸点位置的X坐标
            var endX = e.changedTouches[0].clientX;
            //触摸开始与结束，手指移动的距离
            var disX = that.state.startX - endX;
            var delBtnWidth = that.state.delBtnWidth;
            //如果距离小于删除按钮的1/2，不显示删除按钮
            var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx" : "left:0rpx";

            //获取手指触摸的是哪一项
            var index = e.currentTarget.dataset.index;
            var list = that.state.list;
            list[index].txtStyle = txtStyle;
            //更新列表的状态
            that.setState({
                list: list
            });
        }
    }
    //手指触摸动作开始 记录起点X坐标
    touchstart(e) {
        //开始触摸时 重置所有删除
        this.state.list.forEach(function (v, i) {
            if (v.isTouchMove) //只操作为true的
                v.isTouchMove = false;
        })
        this.setState({
            startX: e.changedTouches[0].clientX,
            startY: e.changedTouches[0].clientY,
            list: this.state.list
        })
    }
    //滑动事件处理
    touchmove(e) {
        var that = this,
            index = e.currentTarget.dataset.index, //当前索引
            startX = that.state.startX, //开始X坐标
            startY = that.state.startY, //开始Y坐标
            touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
            touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
            //获取滑动角度
            angle = that.angle({
                X: startX,
                Y: startY
            }, {
                X: touchMoveX,
                Y: touchMoveY
            });
        that.state.list.forEach(function (v, i) {
            v.isTouchMove = false
            //滑动超过30度角 return
            if (Math.abs(angle) > 30) return;
            if (i == index) {
                if (touchMoveX > startX) //右滑
                    v.isTouchMove = false
                else //左滑
                    v.isTouchMove = true
            }
        })
        //更新数据
        that.setState({
            list: that.state.list
        })
    }
    selectAddress(e) {
        this.setState({
            selectId: e.currentTarget.dataset.id
        })
    }
    delBtn(e) {
        console.log('删除地址', e)
        let id = e.currentTarget.dataset.data.id
        let data = {
            id
        }
        HTTP(API.DELETEADDRESS, data, 'GET').then((res: any) => {
            console.log(res)
            if (res.code == 200) {
                this.getAddressList()
            } else {
                Taro.atMessage({
                    'message': res.message,
                    'type': 'error',
                })
            }
        })
    }
    addAddress() {
        Taro.navigateTo({
            url: '/pages/addAddress/index'
        })
    }
    /**
* 计算滑动角度
* @param {Object} start 起点坐标
* @param {Object} end 终点坐标
*/
    angle(start, end) {
        var _X = end.X - start.X,
            _Y = end.Y - start.Y
        //返回角度 /Math.atan()返回数字的反正切值
        return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
    }
    /**
     * 指定config的类型声明为: Taro.Config
     *
     * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
     * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
     * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
     */
    config: Config = {
        navigationBarTitleText: '地址管理'
    }

    render() {
        return (
            <View className='container'>
                <AtMessage />
                {
                    this.state.list.length > 0 ?
                        this.state.list.map((item, index) => {
                            return (
                                <View className={`touch-item ${item.isTouchMove ? 'touch-move-active' : ''}`} data-index="{{index}}">
                                    <View className="content">
                                        <View className='item' key={index}
                                            style={item.txtStyle}
                                            data-index={index}
                                            data-id={item.id}
                                            onTouchStart={this.touchstart}
                                            onTouchMove={this.touchmove}
                                            onTouchEnd={this.touchE}
                                            onClick={this.selectAddress}>
                                            <View className='point'>
                                                <Image src={this.state.selectId == item.id ? selected : no_selected} />
                                            </View>
                                            <View className='info'>
                                                <View className='top_box' style='paddding-left:40rpx'>
                                                    {item.name}
                                                    {item.phone}
                                                </View>
                                                <View className='bottom_box'>
                                                    {item.province}{item.city == item.province ? '' : item.city}{item.district}{item.detailAddress}
                                                </View>
                                            </View>
                                        </View>

                                    </View>
                                    <View
                                        className="del"
                                        data-data={item}
                                        onClick={this.delBtn}
                                    >删除
                      </View>
                                </View>)
                        }) : <NoData />}
                <View className='bottomn_box'>
                    <View className='btn actives' onClick={this.addAddress}>
                        <Text>+</Text>
                        添加地址
		            </View>
                </View>
                <View style='height:140rpx' />
            </View>
        )
    }
}
